import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
import Login from '../views/Login' // 这个写法默认会找 Login 文件夹里面的 index.xxx
import { UPDATE_USER_INFO } from '@/store/types'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
]

const createRouter = () => {
  return new VueRouter({
    routes
  })
}
// 需要在一开始的时候先调用一次生成路由对象
let router = createRouter()

export const resetRouter = () => {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

// 要根据 动态获取 用户信息里面的 menus 动态生成路由配置
export const dynamicRoutes = () => {
  const menus = store.getters.menus;
  // const dynamicRoutes = []
  // 遍历menus的一级菜单，生成1级路由
  menus.forEach(menu => {
    const route = {
      path: `/${menu.name}`,
      name: menu.name,
      component: () => import('../views/HomePage'),
      // 希望能跳转到第一个子路由
      // ums
      // ums/admin
      redirect: `/${menu.name}/${menu.children[0].name}`,
      children: [],
      // 为了实现面包屑 需要一个路由对应的文字，我们可以在一开始生成路由的时候，就存进去
      meta: {  // 元信息，是就用来存储一些和路由对应的数据的
        title: menu.title
      }
    }
    // 再遍历 menu的 children 数组，生成二级路由
    menu.children.forEach(sub => {
      const subRoute = {
        path: '/' + menu.name + '/' + sub.name, //  完整的写法： /menu.name/menu.children[i].name
        name: sub.name,
        component: () => import(`@/views/${menu.name}/${sub.name}.vue`),
        meta: {
          title: sub.title
        }
      }
      route.children.push(subRoute)
    })
    // console.log(route);
    // dynamicRoutes.push(route)
    router.addRoute(route)
  })

  // 动态添加 动态路由数组
  // router.addRoutes(dynamicRoutes)

  // 还要一个首页对应的路由
  const indexRoute = {
    path: '/',
    name: 'home',
    component: () => import('@/views/HomePage'),
    redirect: '/index',
    meta: { title: '首页' },
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('@/views/Index'),
        meta: { title: '首页' },
      }
    ]
  }
  // 把首页对应的路由添加到 路由对象中
  router.addRoute(indexRoute)
}


// 添加路由前置导航守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  // 如果用户刷新了，vuex里面的menus丢失了，重新去获取
  if (token && !store.state.userInfo.menus) {
    store.dispatch(UPDATE_USER_INFO).then(() => {
      // console.log(123);
      // 动态地添加路由
      dynamicRoutes()
      // 跳转到home
      next(to)
    })
  }
  // 如果没有登录，不能访问除了login以外的页面
  else if (!token && to.path !== '/login') {
    next('/login')
  }
  else {
    next()
  }

})


// 重写push方法来 屏蔽 重复跳转到同一个路由的报错
const orginPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location, onResolve, onReject) {
  if (onResolve || onReject) return orginPush.call(this, location, onResolve, onReject)
  return orginPush.call(this, location).catch(err => err)
}

export default router
